<template>
	<view class="agent-layout">
		
		<z-paging ref="pagingRef" bg-color="#f7f7f7" v-model="dataList" @query="queryList" use-page-scroll>
			<xh-agent-search v-model="keywords" @searchResult="searchResult" @sortResult="sortResult"></xh-agent-search>
			<view class="agent-list">
				<view class="agent-item" v-for="(item,index) in dataList" :key="item.agentId" @tap="didSelectAgent(item)">
					<image class="agent-item-photo" src="/static/operate/agent_photo.png" mode="aspectFit"></image>
					<view class="agent-item-content">
						<text class="agent-item-name">{{item.agentName}}</text>
						<text class="agent-item-space">{{item.agentId}}</text>
						<text class="agent-item-space">手机号：{{item.tel}}</text>
						<text class="agent-item-space">认证时间：{{dayjs(item.authTime).format('YYYY-MM-DD')}}</text>
						<view class="agent-item-num-box agent-item-space">
							<text>机具数：</text>
							<text class="agent-item-num-text">{{item.deviceCount}}台</text>
						</view>
					</view>
					<xh-icon class="agent-item-right-icon" icon="icon_jiantou" size="28rpx"></xh-icon>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { getAgentList } from '@/common/api/api.js'
	import dayjs from 'dayjs'
	import useZPaging from "@/node_modules/z-paging/components/z-paging/js/hooks/useZPaging.js"
	const dataList = ref([])
	const pagingRef = ref(null)
	const keywords = ref('')
	const selectSortKey = ref('APPLY_DATE')
	const props = defineProps({
		type:{
			type:String,
			default:'代理商报表'
		},
	})
	useZPaging(pagingRef)
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		params.identStatus = '00'
		params.sortType = 'DESC'
		if(uni.$uv.test.mobile(keywords.value)){
			params.contactNo = keywords.value
		}
		else{
			params.agentName = keywords.value
		}
		if(!uni.$uv.test.mobile(selectSortKey.value)){
			params.sortField = selectSortKey.value
		}
		const res = await getAgentList(params, pageNo)
		const list = res.result
		if(pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value,...list]
		pagingRef.value.completeByTotal(list,res.page.totalElements)
	}
	// 选择指定代理商
	const didSelectAgent = (item)=>{
		if(props.type == '代理商报表'){
			uni.navigateTo({
				url:`/pages/home/agent-report/agent-report?agentId=${item.agentId}`
			})
		}
		if(props.type == '我的代理商列表' || props.type == '货款管理' || props.type == '政策配置'){
			const dataStr = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url:`/pages/home/agent-manager/agent-info/agent-info?data=${dataStr}`
			})
		}
	}
	// 搜索回调
	const searchResult = ()=>{
		pagingRef.value.reload()
	}
	// 排序回调
	const sortResult = (sort)=>{
		selectSortKey.value = sort
		pagingRef.value.reload()
	}
	// 刷新数据
	const reloadData = ()=>{
		pagingRef.value.reload()
	}
	defineExpose({
		reloadData
	})
</script>

<style lang="scss" scoped>
	.agent-layout {
		background-color: $xh-bg-color;
		padding: 30rpx;
		.agent-list {
			.agent-item {
				display: flex;
				background-color: white;
				padding: 30rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				.agent-item-photo {
					width: 96rpx;
					height: 96rpx;
				}

				.agent-item-right-icon {
					flex-shrink: 0;
					margin-left: auto;
				}

				.agent-item-content {
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					color: $xh-color-6;
					font-size: 26rpx;

					.agent-item-name {
						color: $xh-color-3;
						font-size: 30rpx;
					}

					.agent-item-space {
						margin-top: 16rpx;
					}

					.agent-item-num-box {
						color: $xh-color-6;
						font-size: 26rpx;

						.agent-item-num-text {
							color: $xh-orange-color;
						}

					}
				}
			}
		}

	}
</style>